<template>
  <div class="box">
    <el-card style="height: 70px">
      <div class="top">
        <div class="left">校区管理<span></span>个</div>
        <div class="right" @click="dialogFormVisible = true">
          <span>添加校区</span>
        </div>
      </div>
    </el-card>
    <el-card>
      <el-table :data="account" style="width: 100%; height: 480px">
        <el-table-column
          prop="title"
          label="校区"
          width="300"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="所有人"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="mobile"
          label="校区电话"
          width="300"
        ></el-table-column>
        <el-table-column prop="tel" label="校区座机"> </el-table-column>
        <el-table-column prop="" label="编辑校区">
          <template v-slot:default="scope">
            <i class="el-icon-edit" @click="accountedit(scope.row)"></i>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template v-slot:default="scope">
            <el-row>
              <div class="nan2" @click="accountdel(scope.row.id)">删除</div>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 25px; margin-left: 30px">
        <el-pagination
          layout="prev, pager, next"
          :total="counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 添加 -->
    <el-dialog title="添加校区" width="45%" v-model="dialogFormVisible">
      <div style="margin: 20px"></div>
      <el-form
        label-position="labelPosition"
        label-width="80px"
        :model="addform"
        :rules="rules"
        ref="inserform"
      >
        <el-form-item label="联系姓名" prop="name">
          <el-input style="width: 300px" v-model="addform.name"></el-input>
        </el-form-item>
        <el-form-item label="校区名称" prop="title">
          <el-input style="width: 300px" v-model="addform.title"></el-input>
        </el-form-item>
        <el-form-item label="校区电话" prop="mobile">
          <el-input style="width: 300px" v-model="addform.mobile"></el-input>
        </el-form-item>
        <el-form-item label="校区座机" prop="tel">
          <el-input style="width: 300px" v-model="addform.tel"></el-input>
        </el-form-item>
        <el-form-item label="校园地址" prop="address">
          <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="" prop="address">
          <el-input
            placeholder="请输入详细地址"
            style="width: 300px"
            v-model="addform.address"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="accountform('inserform')"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 添加 -->
    <!-- 修改 -->
    <el-dialog title="修改校区" width="45%" v-model="dialogFormVisiblea">
      <div style="margin: 20px"></div>
      <el-form
        label-position="labelPosition"
        label-width="80px"
        :model="editform"
        :rules="rules"
        ref="inserform"
      >
        <el-form-item label="联系姓名" prop="name">
          <el-input style="width: 300px" v-model="editform.name"></el-input>
        </el-form-item>
        <el-form-item label="校区名称" prop="title">
          <el-input style="width: 300px" v-model="editform.title"></el-input>
        </el-form-item>
        <el-form-item label="校区电话" prop="mobile">
          <el-input style="width: 300px" v-model="editform.mobile"></el-input>
        </el-form-item>
        <el-form-item label="校区座机" prop="tel">
          <el-input style="width: 300px" v-model="editform.tel"></el-input>
        </el-form-item>
        <el-form-item label="校园地址" prop="address">
          <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="" prop="address">
          <el-input
            placeholder="请输入详细地址"
            style="width: 300px"
            v-model="editform.address"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisiblea = false">取 消</el-button>
          <el-button type="primary" @click="edit('inserform')">修改</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 修改 -->
  </div>
</template>
<script>
import { regionData, CodeToText } from "element-china-area-data";
export default {
  data() {
    var checkprice = (rule, value, callback) => {
      if (!/^(\w{3,})+(@)+(\w)+(.com)|(163)$/.test(value)) {
        callback(new Error("邮箱格式不对"));
      }
    };
    return {
      options: regionData,
      selectedOptions: [],

      accountinfo: {
        pageSize: 8,
        page: 1,
      },
      xiaoqu: [],
      counts: [],
      editform: {
        id: "",
        name: "",
        title: "",
        mobile: "",
        tel: "",
        address: "",
      },
      addform: {
        name: "",
        title: "",
        mobile: "",
        tel: "",
        address: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入账号名称", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        pass: [
          { required: true, message: "请输入账号密码", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        tel: [
          { required: true, message: "请输入电话", trigger: "blur" },
          { min: 11, max: 11, message: "长度 11 个字符", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入用户邮箱", trigger: "blur" },
          { validator: checkprice, trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入联系地址", trigger: "blur" },
          { min: 5, max: 20, message: "长度在 5 到20 个字符", trigger: "blur" },
        ],
      },
      account: [],
      dialogFormVisible: false,
      dialogFormVisiblea: false,
    };
  },
  created() {
    this.accountList();
  },
  methods: {
    //   三级联动
    handleChange() {
      var loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
    //   alert(loc);
    },
    //   三级联动
    //校区列表
    async accountList() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/campus/list",
        { params: this.accountinfo }
      );
      // console.log(res);
      this.counts = res.data.counts;
      if (res.errCode == "10000") {
        this.account = res.data.list;
        this.counts = res.data.counts;
      } else {
        this.$message.error("请求数据失败");
      }
    },
    //校区列表
    // 分页
    // handleSizeChange(val) {
    //   // console.log(`每页 ${val} 条`);
    //   this.accountinfo.pageSize = val;
    //   this.accountList();
    // },
    handleCurrentChange(val) {
      this.accountinfo.page = val;
      this.accountList();
      // console.log(`当前页: ${val}`);
    },
    // 分页结束
    //校区添加
    async accountform(inserform) {
      // console.log(inserform);
      let flag = false;
      this.$refs[inserform].validate((res) => {
        // console.log(res);
        if (res == false) {
          flag = true;
        }
      });
      if (flag) {
        return;
      }
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/campus/add",
        this.addform
      );
      if (res.errCode == "10000") {
        this.$message.success("添加成功");
        this.accountList();
        this.dialogFormVisible = false;
      } else {
        this.$message.error("添加失败");
      }
    },
    //校区添加
    //删除
    async accountdel(id) {
      const result = await this.$confirm(
        "此操作将永久删除该记录，是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((error) => {
        return error;
      });
      if (result == "confirm") {
        const { data: res } = await this.$http.get(
          "http://www.eshareedu.cn/edusystems/api/campus/delete",
          { params: { id: id } }
        );
        if (res.errCode == "10000") {
          this.$message.success("删除成功");
          this.accountList();
        } else {
          this.$message.error("删除失败");
        }
        if (result == "cancel") {
          this.$message.info("已取消删除");
        }
      }
    },
    //删除
    //校区form值
    accountedit(row) {
      this.dialogFormVisiblea = true;
      // console.log(row);
      this.editform.id = row.id;
      this.account.forEach((item) => {
        if (row.id == item.id) {
          this.editform.name = row.name;
          this.editform.title = row.title;
          // this.editform.pass = row.pass;
          this.editform.mobile = row.mobile;
          this.editform.tel = row.tel;
          this.editform.address = row.address;
        }
      });
    },
    //校区form值
    // 校区修改
    async edit() {
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/campus/add",
        this.editform
      );
      if (res.errCode == "10000") {
        this.$message.success("修改成功");
        this.accountList();
        this.dialogFormVisiblea = false;
      } else {
        this.$message.error("修改失败");
      }
    },
    // 校区修改
  },
};
</script>
<style lang="less" scoped>
.box {
  width: 100%;
}
.top {
  // height: 70px;
  display: flex;
  justify-content: space-between;
}
.top .left {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
}

.top .right {
  width: 68px;
  height: 35px;
  background-color: #fd665b;
  color: #fff;
  border-radius: 3px;
  font-size: 12px;
  line-height: 35px;
  text-align: center;
  cursor: pointer;
}

.nan1 {
  font-size: 12px;
  color: #419efe;
  // margin-left: 20px;
  cursor: pointer;
}

.nan2 {
  font-size: 12px;
  color: #419efe;
  margin-left: 20px;
  cursor: pointer;
}

i {
  font-size: 15px;
  color: #419efe;
  margin-left: 10px;
  cursor: pointer;
}
</style>